<template>
  <!-- logs.wxml -->
  <view class="formContainer">
      <view class="centerRoot" :class="{ hasInput: hasInput, hasMoreSelect1: hasMoreSelect1, hasMoreSelect2: hasMoreSelect2 }">
          <view class="topRoot">
              <view class="topTitle">
                  <image src="https://goverment-cdn.oss-cn-hangzhou.aliyuncs.com/assets/questionnaireTopLogo.png" mode="aspectFit" />
              </view>
              <view class="questionContainer">
                  <view :class="'question ' + (active === 1 ? 'active' : '') + ' ' + (active > 1 ? 'actived' : '')">
                      <view class="questionName">
                          <text>1、你喜欢这个产品吗？</text>
                      </view>
                      <view class="questionParent">
                          <view class="questionItem" :class="{ active: q1.indexOf('1') > -1 }" data-question="1" data-answer="1" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>A. 是</text>
                          </view>
                          <view class="questionItem" :class="{ active: q1.indexOf('2') > -1 }" data-question="1" data-answer="2" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>B. 否</text>
                          </view>
                      </view>
                  </view>
                  <view v-if="q1 + '' === '1'" :class="'question ' + (active === 2 ? 'active' : '') + ' ' + (active > 2 ? 'actived' : '')">
                      <view class="questionName">
                          <text>1-1、你为什么喜欢这个产品（多选）？</text>
                      </view>
                      <view class="questionParent">
                          <view class="questionItem" :class="{ active: q2.indexOf('1') > -1 }" data-question="2" data-answer="1" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>A. 喜欢奥利奥品牌</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('2') > -1 }" data-question="2" data-answer="2" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>B. 是有经典奥利奥风味的</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('3') > -1 }" data-question="2" data-answer="3" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>C. 喜欢蛋糕送送软软的口感</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('4') > -1 }" data-question="2" data-answer="4" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>D. 喜欢他的雪融般夹心</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('5') > -1 }" data-question="2" data-answer="5" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>E. 喜欢他的包装设计</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('6') > -1 }" data-question="2" data-answer="6" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>F. 喜欢独立小包装的便携设计</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('7') > -1 }" data-question="2" data-answer="7" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>G. 其他</text>
                          </view>
                          <view v-if="q2.indexOf('7') > -1" class="questionItem input" data-question="2" data-answer="7">
                              <view class="inputContainer">
                                  <input placeholder="请输入其他原因" data-question="2" @input="bindKeyInput" placeholder-class="input-placeholder" />
                              </view>
                          </view>
                      </view>
                  </view>
                  <view v-else :class="'question ' + (active === 2 ? 'active' : '') + ' ' + (active > 2 ? 'actived' : '')">
                      <view class="questionName">
                          <text>1-2、你为什么不喜欢这个产品（多选）？</text>
                      </view>
                      <view class="questionParent">
                          <view class="questionItem" :class="{ active: q2.indexOf('1') > -1 }" data-question="2" data-answer="1" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>A. 口味太干</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('2') > -1 }" data-question="2" data-answer="2" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>B. 口味太甜</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('3') > -1 }" data-question="2" data-answer="3" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>C. 香精味太重</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('4') > -1 }" data-question="2" data-answer="4" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>D. 夹心太甜腻</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('5') > -1 }" data-question="2" data-answer="5" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>E. 没有奥利奥经典的味道</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('6') > -1 }" data-question="2" data-answer="6" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>F. 价格太贵</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('7') > -1 }" data-question="2" data-answer="7" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>G. 觉得不健康</text>
                          </view>
                          <view class="questionItem" :class="{ active: q2.indexOf('8') > -1 }" data-question="2" data-answer="8" @tap="questionOnClick">
                              <view class="questionCheckbox"><view class="innerBox"></view></view>
                              <text>H. 其他</text>
                          </view>
                          <view v-if="q2.indexOf('8') > -1" class="questionItem input" data-question="2" data-answer="8">
                              <view class="inputContainer">
                                  <input placeholder="请输入其他原因" data-question="2" @input="bindKeyInput" placeholder-class="input-placeholder" />
                              </view>
                          </view>
                      </view>
                  </view>
                  <view :class="'question ' + (active === 3 ? 'active' : '') + ' ' + (active > 3 ? 'actived' : '')">
                      <view class="questionName">
                          <text>2、如果奥利奥云朵蛋糕出新品，你希望是什么口味？</text>
                      </view>
                      <view class="questionParent">
                          <view class="questionItem textarea">
                              <view class="inputContainer">
                                  <textarea placeholder="请输入" :auto-height="false" data-question="3" @blur="bindKeyInputTextarea" placeholder-class="textarea-placeholder"></textarea>
                              </view>
                          </view>
                      </view>
                  </view>
                  <view :class="'question ' + (active === 4 ? 'active' : '') + ' ' + (active > 4 ? 'actived' : '')">
                      <view class="questionName">
                          <text>3、你还有什么其他的建议吗？</text>
                      </view>
                      <view class="questionParent">
                          <view class="questionItem textarea">
                              <view class="inputContainer">
                                  <textarea placeholder="请输入" :auto-height="false" data-question="4" @blur="bindKeyInputTextarea" placeholder-class="textarea-placeholder"></textarea>
                              </view>
                          </view>
                      </view>
                  </view>
              </view>
          </view>
          <view class="bottomProgress">
              <text>游戏进度 {{ active }}/{{ questionCount }}</text>
              <view class="progressOuter">
                  <view class="progressInner" :style="'width: ' + (active - 1) * (100 / questionCount) + '%;'">
                      <image src="https://goverment-cdn.oss-cn-hangzhou.aliyuncs.com/assets/yui.svg" mode="aspectFit" />
                  </view>
              </view>
          </view>
      </view>
      <view class="bottomSubmit">
          <view class="bottomButton" @tap="onNext">
              <text>{{ active === questionCount ? '提交问卷' : '下一步' }}</text>
          </view>
      </view>
      <view :class="'modal ' + (!success ? 'hidden' : '')">
          <view class="modal-musk"></view>
          <view class="modal-content">
              <view class="topTips">
                  <view class="content">
                      <image src="https://goverment-cdn.oss-cn-hangzhou.aliyuncs.com/assets/image%403x.png" mode="" />
                      <text class="text">填写完成，谢谢参与！</text>
                  </view>
              </view>
              <view class="bottomBtn">
                  <button @tap="confirm">确定</button>
              </view>
          </view>
      </view>
  </view>
</template>

<script lang="ts">
import { userLogin } from "@/services/utils";
// logs.ts

export default {
  data() {
      return {
          active: 1,
          q1: '',
          q2: '',
          q2Answer: '',
          q3Answer: '',
          q4Answer: '',
          success: false,
          version: 4,
          questionCount: 4,
      };
  },
  onLoad() {
      const paramsDeviceId = this.getParam()['device'];
      if (paramsDeviceId) {
        uni.setStorageSync('DEVICE_ID_PARAMS', paramsDeviceId);
      }
      this.handleLogin();
  },
  computed: {
    hasInput() {
      if (
        (this.active === 2 && this.q2.indexOf('7') > -1 && this.q1 === '1')
        || 
        (this.active === 2 && this.q2.indexOf('8') > -1 && this.q1 === '2')
      ) {
        return true
      }
    },
    hasMoreSelect1() {
      if (this.active === 2 && this.q1 === '1') {
        return true
      }
    },
    hasMoreSelect2() {
      if (this.active === 2 && this.q1 === '2') {
        return true
      }
    },
  },
  methods: {
      // 事件处理函数
      setData(datas) { 
        Object.keys(datas).map(item => {
          this[item] = datas[item]
        })
      },

      getDeviceId() {
        const storageId = uni.getStorageSync('DEVICE_ID_PARAMS');
        if (storageId) {
          return storageId;
        }
        return 1;
      },
      getParam(){
        let routes: { route: string, options?: { [key: string]: string } }[] = getCurrentPages(); // 获取当前打开过的页面路由数组
        let curParam = routes[routes.length - 1].options; //获取路由参数
        // 拼接参数
        return curParam
      },
      async onNextTick() {
        await new Promise((resolve) => {
          setTimeout(() => {
            resolve({})
          }, 20)
        })
      },
      async onNext() {
        // @ts-ignore
        await this.onNextTick();
        if (this.active === 3 || this.active === 4) {
          console.log(this.active, this[`q${this.active}Answer`])
          if (!this[`q${this.active}Answer`]) {
            uni.showToast({
                title: '请填写',
                icon: 'none',
                duration: 2000
            });
            return;
          }
        } else {
          if (!this['q' + this.active]) {
            uni.showToast({
                title: '请选择',
                icon: 'none',
                duration: 2000
            });
            return;
          }
        }
        if (this.active === this.questionCount) {
            this.submitForm();
        } else {
          this.setData({
            active: this.active + 1 > this.questionCount ? this.questionCount : this.active + 1
          })
        }
      },

      bindKeyInput: function (e: any) {
          const question = e.target.dataset.question;
          this.setData({
              ['q' + question + 'Answer']: e.detail.value
          });
      },

      submitForm() {
          const answer = {
              q1: this.q1,
              q2: this.q2,
              q2Answer: this.q2Answer,
              q3Answer: this.q3Answer,
              q4Answer: this.q4Answer,
          };
          uni.showLoading({
              title: '请稍后'
          });
          const token = uni.getStorageSync('tokae_token');
          const oreotoken = uni.getStorageSync('TOKEN');
          uni.request({
              url: process.env.CLOUD_URL + '/questionnaire/pushUserRecord?_=' + Date.now(),
              method: 'POST',
              header: {
                  authorization: token,
                  oreotoken,
                  device: this.getDeviceId()
              },
              data: {
                  answer: JSON.stringify(answer),
                  doneFlag: true,
                  version: this.version
              },
              success: (res: any) => {
                  if (res.data && res.data.success) {
                      this.setData({
                          success: true
                      });
                  } else {
                      uni.showToast({
                          icon: 'error',
                          title: '提交失败',
                          duration: 3000
                      });
                  }
                  uni.hideLoading();
                  if (res.statusCode === 401) {
                      this.handleLogin();
                  }
              },
              fail: (err: any): void => {
                  uni.hideLoading();
                  uni.showToast({
                      icon: 'error',
                      title: '注册失败',
                      duration: 3000
                  });
              }
          });
      },

      getFormState() {
          const token = uni.getStorageSync('tokae_token');
          uni.request({
              url: process.env.CLOUD_URL + '/questionnaire/queryRecord?_=' + Date.now() + '&version=' + this.version,
              method: 'GET',
              header: {
                  authorization: token,
                  device: this.getDeviceId()
              },
              success: (res: any) => {
                  if (res.data && res.data.userid) {
                      // 查询到数据
                      let answer;
                      if (res.data.answer) {
                          answer = JSON.parse(res.data.answer);
                      } else {
                      }
                      const dataParams: any = {
                          success: res.data.doneFlag
                      };
                      // if (answer) {
                      //     dataParams.q1 = answer.q1;
                      //     dataParams.q2 = answer.q2;
                      //     dataParams.q3 = answer.q3;
                      //     dataParams.active = answer.q3 ? 3 : answer.q2 ? 2 : 1;
                      // }
                      if (res.data.doneFlag) {
                          this.setData(dataParams);
                      }
                  } else {
                      uni.showToast({
                          icon: 'error',
                          title: '查询失败',
                          duration: 3000
                      });
                  }
                  if (res.statusCode === 401) {
                      this.handleLogin();
                  }
              },
              fail: (err: any): void => {
                  uni.showToast({
                      icon: 'error',
                      title: '注册失败',
                      duration: 3000
                  });
              }
          });
      },

      questionOnClick(event: any) {
        const question = event.currentTarget.dataset.question;
        const answer = event.currentTarget.dataset.answer;
        const questionLabel = 'q' + question;
        const beforeValue = this[questionLabel];
        let afterValue = answer;
        if (question + '' === '2') {
          if ((beforeValue + '').indexOf(answer + '') > -1) {
            afterValue = beforeValue.replace(answer, '');
          } else {
            afterValue = beforeValue + answer;
          }
        }
        this.setData({
            ['q' + question]: afterValue
        });
      },
      bindKeyInputTextarea: function (e: any) {
          const question = e.target.dataset.question;
          console.log(question, e.detail.value)
          this.setData({
              ['q' + question + 'Answer']: e.detail.value
          });
      },

      async handleLogin() {
        this.runLogin();
      },

      registerUser() {
        return new Promise((resolve, reject) => {
          try {
            const loginParam: { type: number, code?: string } = {
              type: 1,
            };
            if (!uni.getStorageSync("OPENID")) {
              uni.login({
                provider: "weixin",
                success: async (res) => {
                  console.log(res);
                  loginParam.code = res.code;
                  const { data } = await userLogin(loginParam);
                  uni.setStorageSync("OPENID", data?.openId);
                  uni.setStorageSync("UNIONID", data?.unionId);
                  uni.setStorageSync("TOKEN", data?.accessToken);
                  resolve(res);
                },
                fail: (e) => {
                  reject(e)
                }
              });
            } else {
              resolve(loginParam);
            }
          } catch (e) {
            reject(e);
          }
        })
      },

      async runLogin() {
        try {
          await this.registerUser()
        } catch (e) {
          uni.showToast({
            icon: 'error',
            title: '注册失败',
            duration: 3000
          });
        }

        uni.showLoading({
            title: '正在加载'
        });

        const userPhone = getApp().globalData.user.phone;
        
        if (userPhone) {
          // 是会员
          getApp().getUserInfo().then((user) => {
            const memberid = user.memberScore.memberId;
            this.loginByMemberId(memberid);
          }).catch((e) => {
            uni.showToast({
              icon: 'error',
              title: '注册失败',
              duration: 3000
            });
          });
        } else {
          // 不是会员
          getApp().getWechatUserProfile({
            path: '/packageTokaeGame/formv2/form?device=' + this.getDeviceId(),
            redirect: true
          })
        }
      },

      loginByMemberId(memberId: string) {
        return new Promise((resolve, reject) => {
          uni.request({
            method: 'POST',
            url: process.env.CLOUD_URL + '/user/loginByKaiJie',
            header: {
              device: this.getDeviceId()
            },
            data: {
                memberid: memberId,
            },
            success: (res) => {
                const result: any = res.data;
                if (result) {
                    uni.setStorageSync('tokae_userInfo', result);
                    uni.setStorageSync('tokae_token', result.token);
                    this.getFormState();
                    resolve(result);
                } else {
                    reject();
                }
            },
            fail: () => {
                uni.showToast({
                    icon: 'error',
                    title: '注册失败',
                    duration: 3000
                });
                reject();
            }
          });
        })
      },

      confirmLogin() {
          const token = uni.getStorageSync('tokae_token');
          return new Promise((resolve, reject) => {
              uni.request({
                  url: process.env.CLOUD_URL + '/user/getUserInfo?_=' + Date.now(),
                  method: 'GET',
                  header: {
                      authorization: token,
                      device: this.getDeviceId()
                  },
                  success: (res: any) => {
                      if (res.data && res.data.token) {
                          uni.setStorageSync('tokae_userInfo', res.data);
                          uni.setStorageSync('tokae_token', res.data['tokae_token']);
                          this.getFormState();
                          resolve(res);
                      } else {
                          reject();
                      }
                      if (res.statusCode === 401) {
                          this.handleLogin();
                      }
                  },
                  fail: (err: any): void => {
                      reject();
                  }
              });
          });
      },

      confirm() {
          uni.reLaunch({
              url: '/pages/home/home'
          });
      }
  }
};
</script>
<style>
.formContainer {
    /* display: flex; */
    /* height: 100%; */
    /* align-items: center; */
    padding-bottom: 200rpx;
    width: 100%;
    overflow-x: hidden;
}
.root {
    width: 100%;
    overflow-x: hidden;
}
.centerRoot {
    position: relative;
    height: 920rpx;
    margin: 190rpx 32rpx 0 32rpx;
    border-radius: 12px;
    background: linear-gradient(180deg, #52b7ff 0%, #1569e8 100%);
    box-shadow: inset -1px -2px 3px 0px #0054d3, 0px 0px 3px 0px #0054d3, inset 0px -2px 8px 0px #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.centerRoot.hasInput {
  margin-top: 130rpx;
  height: 1060rpx;
}
.centerRoot.hasMoreSelect1 {
  margin-top: 130rpx;
  height: 1140rpx;
}
.centerRoot.hasInput.hasMoreSelect1 {
  margin-top: 130rpx;
  height: 1290rpx;
}
.centerRoot.hasMoreSelect2 {
  margin-top: 130rpx;
  height: 1240rpx;
}
.centerRoot.hasInput.hasMoreSelect2 {
  margin-top: 130rpx;
  height: 1380rpx;
}
.topRoot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}
.topTitle {
    /* padding: 64rpx 0; */
    width: 306rpx;
    height: 80rpx;
    position: relative;
    flex-shrink: 0;
}
.topTitle image {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 200rpx;
}
.questionContainer {
    margin-top: 40rpx;
    width: 480rpx;
    flex: 1;
    position: relative;
}
.questionContainer .question {
    position: absolute;
    top: 0;
    left: 0;
    left: 1440rpx;
    opacity: 0;
}
.questionContainer .actived {
    left: -1444rpx;
    opacity: 0;
    z-index: 9;
    transition: all 0.2s;
}
.questionContainer .active {
    left: 0;
    opacity: 1;
    z-index: 10;
    transition: all 0.2s;
}
.questionName {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.questionName text {
    width: 100%;
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 3;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(13, 25, 102, 0.4);
}
.questionName .subTitle {
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0em;
    color: #0657bc;
    margin-top: 16rpx;
    text-shadow: unset;
}

.questionCheckbox {
    width: 32rpx;
    height: 32rpx;
    opacity: 1;
    background: #0b5ae8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    flex-shrink: 0;
}
.questionCheckbox .innerBox {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(180deg, #ffd279 0%, #ffef5f 100%);
    box-shadow: inset 0px -5px 8px 0px rgba(203, 92, 0, 0.4);
    transition: all 0.3s;
}
.questionParent .questionItem.active .questionCheckbox {
    background: #ffffff;
}
.questionParent .questionItem.active .questionCheckbox .innerBox {
    opacity: 1;
}

.questionParent {
    margin-top: 54rpx;
}

.questionItem {
    width: 480rpx;
    height: 56rpx;
    display: flex;
    align-items: center;
    margin-bottom: 48rpx;
    transition: all 0.3s;
}
.questionContainer .question:nth-child(2) .questionItem {
  width: 500rpx;
}
.questionItem text {
    padding: 0 32rpx;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: 500;
    color: #bfedff;
    white-space: nowrap;
}
.mb0 {
    margin-bottom: 0;
}
.questionItem.input {
    height: auto;
    margin-top: 24rpx;
}
.questionItem.input .inputContainer {
    height: 88rpx;
    width: 100%;
    border-radius: 24rpx;
    opacity: 1;
    background: #83b4f0;
    box-sizing: border-box;
    border: 4px solid #cae4ff;
}
.questionItem.input .inputContainer input {
    height: 100%;
    padding: 0 24rpx;
    color: #3a87da;
    font-size: 16px;
}
.questionItem.textarea {
    height: auto;
}
.questionItem.textarea .inputContainer {
    width: 100%;
}
.questionItem.textarea .inputContainer textarea {
    height: 240rpx;
    border-radius: 12px;
    opacity: 1;
    background: #83b4f0;
    color: #3a87da;
    box-sizing: border-box;
    border: 4px solid #cae4ff;
    padding: 16rpx 24rpx;
    width: 100%;
}
.questionItem.textarea .inputContainer .textarea-placeholder {
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    color: #4a87c8;
}
.questionItem.input .inputContainer .input-placeholder {
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0em;
    color: #4a87c8;
    height: 100%;
}
.bottomProgress {
    flex-shrink: 0;
    width: 480rpx;
    margin-bottom: 60rpx;
}
.bottomProgress text {
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    color: #67b0ff;
}
.progressOuter {
    height: 16rpx;
    margin-top: 24rpx;
    background: rgba(17, 17, 17, 0.2);
    border-radius: 12rpx;
}
.progressInner {
    height: 100%;
    width: 0;
    border-radius: 12rpx;
    background: #67b0ff;
    position: relative;
    transition: all 0.2s 0.4s;
}
.progressInner image {
    position: absolute;
    right: -24rpx;
    bottom: 0;
    width: 48rpx;
    height: 38rpx;
}

.bottomSubmit {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 80rpx;
    display: flex;
    justify-content: center;
}
.bottomButton {
    width: 560rpx;
    height: 88rpx;
    border-radius: 44rpx;
    opacity: 1;
    background: linear-gradient(180deg, #ffd279 0%, #ffef5f 100%);
    box-shadow: inset 0px -5px 8px 0px rgba(203, 92, 0, 0.4), 0px 0px 8px 0px rgba(203, 92, 0, 0.4);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #c74509;
    display: flex;
    align-items: center;
    justify-content: center;
}

.log-item {
    margin: 10rpx;
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.modal.hidden {
    display: none;
}
.modal .modal-musk {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transition: all 11s;
}
.modal.hidden .modal-musk {
    opacity: 0;
    transition: all 11s;
}
.modal .modal-content {
    width: 600rpx;
    height: 600rpx;
    background: #64a2ff;
    position: relative;
    z-index: 4;
    border-radius: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, #64a2ff 0%, #0968f7 100%);
}
.modal .modal-content .topTips {
    padding-top: 50rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modal .modal-content .topTips .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 32rpx;
}
.modal .modal-content .topTips image {
    height: 200rpx;
    width: 228rpx;
    position: relative;
    left: 12rpx;
}
.modal .modal-content .topTips .content .text {
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0em;
    margin-top: 36rpx;
    color: #ffffff;
}

.modal .modal-content .topTips .prize-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 94rpx;
    position: relative;
    width: 100%;
}
.modal .modal-content .topTips .prize-content .prizeImage {
    height: 40rpx;
}
.modal .modal-content .topTips .prize-content .prizeImage1 {
    width: 54rpx;
    height: 54rpx;
    position: absolute;
    right: 76rpx;
    top: 44rpx;
}
.modal .modal-content .topTips .prize-content .prizeImage2 {
    width: 54rpx;
    height: 86rpx;
    position: absolute;
    left: 60rpx;
    top: 92rpx;
}
.modal .modal-content .topTips .prize-content .noprize-text {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0em;
    margin-top: 18rpx;
    color: #b1c2de;
}
.modal .modal-content .bottomBtn {
    padding-bottom: 48rpx;
}
.modal .modal-content .bottomBtn button {
    background: linear-gradient(180deg, #ffd279 0%, #ffef5f 100%);
    box-shadow: inset 0px -5px 8px 0px rgba(203, 92, 0, 0.4);
    width: 154px;
    height: 40px;
    border-radius: 24px;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0em;
    color: #c74509;
}
</style>
